!(function () {
    var Game = window.Game = function ({
        dom,
        onClick = function () { },
    }) {
        this.canvas = document.querySelector(dom);
        this.ctx = this.canvas.getContext("2d");
        // 资源管理器
        this.R = {};
        // 渲染定时器
        this.renderTimer = null;
        // 娃娃数组
        this.wawaArr = [];
        // 钩子实例
        this.gouzi = null;
        // 安全域
        this.safeTopHeight = 200;
        // 宽高
        this.canvasWidth = this.canvas.width;
        this.canvasHeight = this.canvas.height;
        // 游戏初始化
        this.init();

        // 监听点击
        this.canvas.addEventListener("click", onClick)

    }
    Game.prototype.init = function () {
        console.log("游戏初始化");
        let xhr = new XMLHttpRequest();
        let self = this;
        let loadCount = 0;
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                let data = JSON.parse(xhr.responseText);
                for (let i = 0; i < data.length; i++) {
                    self.R[data[i].name] = new Image();
                    self.R[data[i].name].src = data[i].img;
                    self.R[data[i].name].onload = function () {
                        loadCount++;
                        self.ctx.clearRect(0, 0, self.canvas.width, self.canvas.height);
                        self.ctx.save()
                        self.ctx.font = "20px 微软雅黑";
                        self.ctx.textAlign = "center";
                        self.ctx.fillText(`正在加载资源(${loadCount}/${data.length})...`, self.canvas.width * 0.5, self.canvas.height * 0.5);
                        self.ctx.restore()
                        if (loadCount == data.length) {
                            setTimeout(() => {
                                // 创建钩子
                                new Gouzi();
                                // 创建娃娃
                                new Array(5).fill(1).forEach(() => {
                                    new Wawa();
                                });
                                self.start();
                            }, 1000)
                        }
                    }
                }
            }
        }
        xhr.open("get", "R.json", true);
        xhr.send();

    }

    Game.prototype.start = function () {
        let frame = 0;
        this.renderTimer = setInterval(() => {
            frame++;
            // 清屏
            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

            // 画帧数
            this.ctx.font = "10px 微软雅黑";
            this.ctx.fillStyle = "red";
            this.ctx.fillText(`Frame:${frame}`, 10, 20);

            // 画勾子
            if (this.gouzi && this.gouzi.constructor === Gouzi) {
                this.gouzi.render();
                this.gouzi.update();
            }

            // 画娃娃
            this.wawaArr.forEach(function (wawa) {
                wawa.render();
                wawa.update();
            })


        }, 1000 / 60)
    }

    Game.prototype.end = function () {
        clearInterval(this.renderTimer);
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.ctx.font = "30px bold 微软雅黑";
        this.ctx.textAlign = "center";
        this.ctx.fillStyle = "red";
        this.ctx.fillText(`You Win！`, this.canvas.width / 2, this.canvas.height / 2);
    }


})()